<template>
  <div class="container">
    <el-row style="height: calc(100vh - 390px)">
      <el-col :span="9">
        <div>
          <div style="background: white;">
            <div style="padding:5px 10px;background: white;">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">风险数量统计</div>
              </div>
            </div>
          </div>
          <div style="padding: 0px 20px;">
            <el-row :gutter="10">
              <el-col :span="12">
                <div
                    style="display: flex;height: 100px;background: #eef7ff;padding: 10px;font-size: 20px;justify-content: space-between;">
                  <div style="display: flex;flex-direction: column;">
                    <div>
                      昨日已结案件
                    </div>
                    <div style="margin-top: 30px;color: #3f74d1;">
                      {{ info.yesterday_finish_case }}
                    </div>
                  </div>
                  <i class="el-icon-s-order"
                     style="font-size: 30px;color:#3f74d1;opacity: 0.7;margin-right: 20px;margin-top: 30px;"></i>
                </div>
              </el-col>
              <el-col :span="12">
                <div
                    style="display: flex;height: 100px;background: #feefea;padding: 10px;font-size: 20px;justify-content: space-between;">
                  <div style="display: flex;flex-direction: column;">
                    <div>
                      今日新增案件风险
                    </div>
                    <div style="margin-top: 30px;color: #c35034;" v-has>
                      {{ info.today_added_case }}
                    </div>
                  </div>
                  <i class="el-icon-message-solid"
                     style="font-size: 30px;color:#c35034;opacity: 0.7;margin-right: 20px;margin-top: 30px;"></i></div>
              </el-col>
            </el-row>
            <el-row :gutter="10" style="margin-top: 20px;">
              <el-col :span="12">
                <div
                    style="display: flex;height: 100px;background: #eef7ff;padding: 10px;font-size: 20px;justify-content: space-between;">
                  <div style="display: flex;flex-direction: column;">
                    <div>
                      存量未结案件
                    </div>
                    <div style="margin-top: 30px;color: #3f74d1;" v-has>
                      {{ info.exist_unfinish_case }}
                    </div>
                  </div>
                  <i class="el-icon-menu"
                     style="font-size: 30px;color:#3f74d1;opacity: 0.7;margin-right: 20px;margin-top: 30px;"></i></div>
              </el-col>
              <el-col :span="12">
                <div
                    style="display: flex;height: 100px;background: #eef7ff;padding: 10px;font-size: 20px;justify-content: space-between;">
                  <div style="display: flex;flex-direction: column;">
                    <div>
                      今日新增人员风险
                    </div>
                    <div style="margin-top: 30px;color: #3f74d1;" v-has>
                      {{ info.today_added_people }}
                    </div>
                  </div>
                  <i class="el-icon-s-check"
                     style="font-size: 30px;color:#3f74d1;opacity: 0.7;margin-right: 20px;margin-top: 30px;"></i>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
      <el-col :span="9">
        <div>
          <div style="background: white;">
            <div style="padding:5px 10px;background: white;">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">今日新增风险等级统计</div>
              </div>
            </div>
          </div>

          <el-row :gutter="10">
            <el-col :span="12">
              <div style="display: flex;flex-direction: column;align-items: center;color: black;">
                <div style="font-weight: 600;">新增案件风险统计</div>
                <div id="echarts1" style="width: 100%;height:220px;"></div>
              </div>
            </el-col>
            <el-col :span="12">
              <div style="display: flex;flex-direction: column;align-items: center;color: black;">
                <div style="font-weight: 600;">新增人员风险统计</div>
                <div id="echarts2" style="width: 100%;height:220px;"></div>
              </div>
            </el-col>
          </el-row>

        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <div style="background: white;">
            <div style="padding:5px 10px;background: white;">
              <div style="display: flex;align-items: center;">
                <div style="width: 10px;height: 35px;background: #0060bf;">
                </div>
                <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">今日总览</div>
                <div style="margin-left: 10px;font-size: 20px;">{{ formattedDateTime }}</div>
              </div>
            </div>
          </div>
          <div style="padding: 0px 20px;">
            <div style="padding: 20px 20px;background: #feefea;height: 218px;border-radius: 10px;">
              <div style="margin-top: 10px;">
                今日新增案件风险 <span style="font-size: 20px;font-weight: 600;" v-has>{{ info.today_added_case }} </span> 条
              </div>
              <div>
                其中 <span
                  style="color: #ee6666;font-weight: 600;">高风险</span> 案件新增案件高风险 <span
                  style="font-size: 20px;font-weight: 600;" v-has>{{ info.new_case_high_risk }}</span> 条
              </div>
              <div style="margin-top: 20px;">
                今日新增人员风险 <span style="font-size: 20px;font-weight: 600;" v-has>{{ info.today_added_people }}</span> 条
              </div>
              <div>
                其中 <span style="color:#ee6666;font-weight: 600;">高风险</span> 人员 <span
                  style="font-size: 20px;font-weight: 600;" v-has>{{ info.new_people_high_risk }}</span> 人
              </div>
              <div style="margin-top: 20px;">
                存量案件风险上升数量 <span style="font-size: 20px;font-weight: 600;" v-has>{{
                  info.exist_case_risk_increase
                }}</span> 条
              </div>
              <div>
                累计 <span style="color:#ee6666;font-weight: 600;">高风险</span> 数量 <span
                  style="font-size: 20px;font-weight: 600;" v-has>{{ info.exist_case_high_risk }}</span> 条
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="9" style="height: 300px;">
        <div style="background: white;">
          <div style="padding:5px 10px;background: white;">
            <div style="display: flex;align-items: center;">
              <div style="width: 10px;height: 35px;background: #0060bf;">
              </div>
              <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">存量案件风险变化统计</div>
            </div>
          </div>
        </div>
        <div style="padding: 0px 20px;display: flex;flex-direction: column;">
          <div style="margin-top: 30px;">
            <div style="align-content: center;padding: 0px 20px;position: relative;">
              <span>风险上升</span>
              <el-progress
                  :format="format"
                  :max="info.exist_unfinish_case"
                  :percentage="percentage1"
                  status="exception"
                  style="display: flex;align-items: center;"></el-progress>
              <div style="position: absolute;top: -10px;right: 80px;">
                <span v-has>{{ info.exist_case_risk_increase }}</span>/{{ info.exist_unfinish_case }}
              </div>
            </div>
          </div>
          <div style="margin-top: 30px;">
            <div style="align-content: center;padding: 0px 20px;position: relative;">
              <span>风险下降</span>
              <el-progress
                  :format="format"
                  :max="info.exist_unfinish_case"
                  :percentage="percentage2"
                  status="success"
                  style="display: flex;align-items: center;"></el-progress>
              <div style="position: absolute;top: -10px;right: 80px;">
                <span v-has>{{ info.exist_case_risk_decrease }}</span>/{{ info.exist_unfinish_case }}
              </div>
            </div>
          </div>
          <div style="margin-top: 30px;">
            <div style="align-content: center;padding: 0px 20px;position: relative;">
              <span>风险不变</span>
              <el-progress
                  :format="format"
                  :max="info.exist_unfinish_case"
                  :percentage="percentage3"
                  status="primary"
                  style="display: flex;align-items: center;"></el-progress>
              <div style="position: absolute;top: -10px;right: 80px;">
                <span v-has>{{ info.exist_case_risk_unchange }}</span>/{{ info.exist_unfinish_case }}
              </div>
            </div>
          </div>

        </div>
      </el-col>
      <el-col :span="9">
        <div style="background: white;">
          <div style="padding:5px 10px;background: white;">
            <div style="display: flex;align-items: center;">
              <div style="width: 10px;height: 35px;background: #0060bf;">
              </div>
              <div style="margin-left: 10px;font-size: 20px;font-weight: bold;">存量案件风险等级统计</div>
            </div>
          </div>
        </div>
        <el-card>
          <div id="echarts3" style="width: 100%;height:220px;"></div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <div style="display: flex;flex-direction: column;align-items: center;">
          <el-button @click="page1" round type="primary"
                     style="width: 200px;height: 60px;font-size: 26px;margin-top: 50px;background: #0060bf;">进入系统
          </el-button>
          <el-button @click="menuPage" round type="primary"
                     style="width: 200px;height: 60px;font-size: 26px;margin-top: 50px;background: #0060bf;">退出系统
          </el-button>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import api from '@/utils/api'
import axios from "axios";
import * as echarts from "echarts";
import hasDirective from "@/utils/has";
import detailData from "@/json/data/今日风险统计.json";
import user from "@/json/db/user.json";


export default {
  data() {
    return {
      intervalIdA: null,
      intervalIdB: null,
      intervalIdC: null,
      intervalIdD: null,

      intervalIdE1: null,
      intervalIdE2: null,
      intervalIdF1: null,
      intervalIdF2: null,
      intervalIdG1: null,
      intervalIdG2: null,
      info: {
        yesterday_finish_case: null,
        exist_unfinish_case: null,
        today_added_case: null,
        today_added_people: null,
        new_case_high_risk: null,
        new_case_mid_risk: null,
        new_case_low_risk: null,
        new_people_high_risk: null,
        new_people_mid_risk: null,
        new_people_low_risk: null,
        exist_case_high_risk: null,
        exist_case_mid_risk: null,
        exist_case_low_risk: null,
        exist_case_risk_increase: null,
        exist_case_risk_decrease: null,
        exist_case_risk_unchange: null
      }
    }
  },
  directives: {
    has: hasDirective
  },
  computed: {
    percentage1() {
      return (this.info.exist_case_risk_increase / this.info.exist_unfinish_case) * 100;
    },
    percentage2() {
      return (this.info.exist_case_risk_decrease / this.info.exist_unfinish_case) * 100;
    },
    percentage3() {
      return (this.info.exist_case_risk_unchange / this.info.exist_unfinish_case) * 100;
    },
    formattedDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = ('0' + (now.getMonth() + 1)).slice(-2);
      const day = ('0' + now.getDate()).slice(-2);
      const hours = ('0' + now.getHours()).slice(-2);
      const minutes = ('0' + now.getMinutes()).slice(-2);
      const seconds = ('0' + now.getSeconds()).slice(-2);

      return `${year}年${month}月${day}日`;
    }
  },
  created() {
    var detailData = require('@/json/data/今日风险统计.json')
    this.info = detailData.data.process_data
    console.log(this.info.yesterday_finish_case)

  },
  mounted() {
    this.addLog()
    this.initCharts1()
    this.initCharts2()
    this.initCharts3()
  },
  methods: {
    addLog() {
      const user = require("@/json/db/user.json")
      const obj = {}
      obj.module = '平台预览'
      obj.content = '查看了【课题五总体趋势】'
      obj.userName = user.userName
      api.addLog(obj);
    },
    format(percentage, value, max) {
      return `${value} /${max}`;
    },
    page1() {
      this.$router.push({path: '/list1'});
    },
    menuPage() {
      this.$router.push({path: '/menu'});
    },
    initCharts1() {
      var chartDom = document.getElementById('echarts1');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'inner',
              formatter: '{c}'
            },
            labelLine: {
              show: false // 显示引导线
            },
            data: [
              {
                value: this.info.new_case_high_risk,
                name: '高风险',
                itemStyle: {
                  color: '#ee6666'
                }
              },
              {
                value: this.info.new_case_mid_risk,
                name: '中风险',
                itemStyle: {
                  color: '#fac858'
                }
              },
              {
                value: this.info.new_case_low_risk,
                name: '低风险',
                itemStyle: {
                  color: '#7ccff0'
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
    initCharts2() {
      var chartDom = document.getElementById('echarts2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            center: ['50%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            labelLine: {
              show: false // 显示引导线
            },
            label: {
              show: true,
              position: 'inner',
              formatter: '{c}'
            },
            data: [
              {
                value: this.info.new_people_high_risk,
                name: '高风险',
                itemStyle: {
                  color: '#ee6666'
                },
              },
              {
                value: this.info.new_people_mid_risk,
                name: '中风险',
                itemStyle: {
                  color: '#fac858'
                }
              },
              {
                value: this.info.new_people_low_risk,
                name: '低风险',
                itemStyle: {
                  color: '#7ccff0'
                }
              }
            ]
          }
        ]
      };

      myChart.setOption(option);
    },
    initCharts3() {
      var chartDom = document.getElementById('echarts3');
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical', // 设置为垂直方向
          top: 'center',      // 垂直居中
          right: '10%',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['50%', '70%'],
            center: ["35%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}:{c}'
            },
            labelLine: {
              show: true // 显示引导线
            },
            data: [
              {
                value: this.info.exist_case_high_risk,
                name: '高风险',
                itemStyle: {
                  color: '#ee6666'
                }
              },
              {
                value: this.info.exist_case_mid_risk,
                name: '中风险',
                itemStyle: {
                  color: '#fac858'
                }
              },
              {
                value: this.info.exist_case_low_risk,
                name: '低风险',
                itemStyle: {
                  color: '#7ccff0'
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
    },
  },
  beforeDestroy() {
  }
}
</script>

<style scoped>

/deep/ .el-button + .el-button, .el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}

/deep/ .el-progress__text {
  display: none;
}

.container {
  width: 100%;
  height: calc(100vh - 50px);
  overflow: auto;
}

</style>